<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="../../img/favicon.ico" type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }


        #nav {
            margin-top: 25px;
            display: block;
            position: absolute;
            margin-left: 42.5%;
        }

        .nav h2 {
            text-align: center;
            font-size: 24px;
            color: black;
        }

        .nav p {
            /*position: absolute;*/
            text-align: center;
            font-size: 16px;
            color: black;
        }

        #nav button {
            position: absolute;
            bottom: 10px;
            right: 10px;
            text-align: right;
        }

        .action-buttons button {
            position: absolute;
            margin-left: 50%;
            /*padding: 10px 20px;*/
            font-size: 16px;
            cursor: pointer;
            text-align: center;
        }

        .all img {
            width: 100%;
            height: 200px;
            /*margin-top: 40px;*/
            object-fit: cover;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        #tu {
            /*margin: 0 auto;*/
            margin-left: -35.5%;
            display: block;
            border-radius: 5px;
        }

    </style>
</head>
<body>
<ul class="layui-nav layui-bg-gray" style="text-align: center">
    <li class="layui-nav-item "><a href="../client/index.html" class="layui-font-red layui-font-32">雪月蛋糕</a></li>
    <li class="layui-nav-item"><a href="../client/index.html">首页</a></li>
    <li class="layui-nav-item">
        <a href="goodsmanage.html">商品分类</a>
    </li>
    <li class="layui-nav-item"><a href="">热销</a></li>
    <li class="layui-nav-item"><a href="">新品</a></li>
    <li class="layui-nav-item ">
        <a href="javascript:;">我的</a>
        <dl class="layui-nav-child">
            <dd><a href="../login.html">登录</a></dd>
            <dd><a href="../reg.html">注册</a></dd>
            <dd><a href="order.html">我的订单</a></dd>
            <dd><a href="index.html">退出登录</a></dd>
        </dl>
    </li>
</ul>
<div id="all">
<!--    <div id="product-details" class="product-details">-->
<!--        <img id="mainImage" src="../../img/PC-买点-切片-001.jpg">-->
<!--    </div>-->
    <div>
        <div id="productContainer" class="layui-row">
            <div id="nav" class="product-container">
                <script id="productTpl" type="text/html">
<!--                    <img id="tu" src="{{d.img.img}}">-->
                    <div id="dj" class="product-card product-clickable" data-product-id="{{d.data.id}}">
                        <img src="{{d.data.img}}">
                        <h2>{{d.data.cakename}}</h2>
                        <p>价格：{{d.data.price}}</p>
                        <button id="up" class="layui-btn layui-btn-primary">立即购买</button>
                    </div>
                </script>

            </div>
        </div>
    </div>
</div>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="../../layui/layui.js"></script>
<script>
    layui.use(['element', 'layer', 'util'], function () {
        // var element = layui.element;
        var layer = layui.layer;
        // var util = layui.util;
        var laytpl = layui.laytpl;
        var $ = layui.jquery;
        var $ = layui.$;
        var temp = new URLSearchParams(location.search);
        var id = temp.get('id');

        var orderDateElement = document.getElementById("order-date");
        // 获取当前时间并格式化
        var currentDate = new Date();
        var formattedDate = currentDate.toLocaleString();//formattedDate是获取当前时间

        $.ajax({
            url: '/goods/cake', // 替换为后端接口地址
            type: 'GET',
            data:'id='+id,
            success: function (data) {
                var getTpl = $("#productTpl").html();//html()是把模板放入頁面
                laytpl(getTpl).render(data, function (str) {
                    $("#nav").html(str);
                });
            },
            error: function () {
                layer.msg('获取数据失败');
            }
        });

        $(document).on("click","#up",function() {

            $.ajax({
                url: '/goods/order', // 替换为后端接口地址
                type: 'GET',
                data:{
                    'id':id,
                    'ctime':formattedDate,
                },
                success: function () {
                    layer.msg("购买成功");
                },
                error: function () {
                    layer.msg('获取数据失败');
                }
            });
        });
    });
</script>

</body>
</html>
